<template>
  <!--  预览Json行数据卡片-->
  <div class="prev-row">
    <template v-if="!title">
      <json-items v-model="$data.model.jsons" :sort="$props.sort" :hidden-if="$props.hiddenIf"></json-items>


      <preview-json-row v-model="row.value" :title="(title ? (title + '.') :'') + row.key"
                        v-for="(row,index) in $data.model.objs" :key="row.key">
      </preview-json-row>

      <preview-json-list v-for="(row,index) in $data.model.tables" :key="index" v-model="row.value"
                         :title="(title ? (title + '.') :'') + row.key">
      </preview-json-list>
    </template>

    <fieldset class="pl" v-else-if="$data.model.jsons?.length">
      <legend v-html="title || '根属性'"></legend>

      <json-items v-model="$data.model.jsons" :sort="$props.sort"></json-items>

      <preview-json-row v-model="row.value" :title="(title ? (title + '.') :'') + row.key"
                        v-for="(row,index) in $data.model.objs" :key="row.key">
      </preview-json-row>

      <preview-json-list v-for="(row,index) in $data.model.tables" :key="index" v-model="row.value"
                         :title="(title ? (title + '.') :'') + row.key">
      </preview-json-list>
    </fieldset>


  </div>
</template>
<script setup>
/**
 * Created by CodeGenerator at 2021-04-13 19:37:26
 */

import previewJsonRow from "./preview-json-row.vue"
import previewJsonTable from "./preview-json-table.vue"
import previewJsonList from "./preview-json-list.vue"
import jsonItems from "./json-items.vue"

defineOptions({
  name: "preview-json-row",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({model: {}});


const $props = defineProps({
  title: {type: String},
  sort: {type: String, default: ""},
  hiddenIf: {
    type: Map, default() {
      return {};
    }
  },
});


const $model = defineModel({type: Object});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const analyse = function (row) {
  if (!row) return;
  var jsons = [], objs = [], tables = [];
  var value = $model.value;
  Object.keys(value).forEach(key => {
    var v = value[key];
    if (jv.isNull(v) || v === "") {
      return;
    }
    var item = {key: key, value: v, type: v.getJsType()}
    if (v.isObjectType()) {
      objs.push(item);
    } else if (v.isArrayType()) {
      if (!v.length) {
        return;
      }
      var one = v[0];
      if (jv.isNull(one)) {
        return;
      }
      if (one.isSimpleType()) {
        item.type = 'tag';
        jsons.push(item)
      } else {
        tables.push(item)
      }
    } else {
      jsons.push(item);
    }
  });
  $data.model = {jsons: jsons.sort(jv.getKeySorter(it => it.key)), objs, tables};
};


watch($model, v => {
  analyse(v);
}, {immediate: true});

onMounted(() => {

})


</script>

<style lang="scss" scoped>

.el-tag {
  padding: 0;
}

.item:not(:first-child) {
  margin-left: 10px;
}

/*productline*/
.pl {
  //display: inline-block;
  //margin: 8px;
  //border-bottom: solid 1px gray;
  //padding: 4px;
  //border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
  z-index: 9;
}


/*title*/
.ti {
  font-weight: bold;
  margin: 4px;
  display: inline-block;
  border-radius: 8px;
  background-color: darkblue;
  padding: 2px 5px;
  color: white;
}

.row {
  display: block;
  font-size: small;
  margin-left: 16px;
}

.pl:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: 0;
  opacity: 0.3;
  border-radius: 1px 10px 10px;
  z-index: -999;
}

legend:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -9999;
  top: 0;
  bottom: 0;
  opacity: 0.3;
}

.prev-row:nth-of-type(5n+1) .pl:before, .prev-row:nth-of-type(5n+1) legend:before {
  background-color: #75f0fc;
}

.prev-row:nth-of-type(5n+2) .pl:before, .prev-row:nth-of-type(5n+2) legend:before {
  background-color: #fdeeaa;
}

.prev-row:nth-of-type(5n+3) .pl:before, .prev-row:nth-of-type(5n+3) legend:before {
  background-color: #b5b3ff;
}

.prev-row:nth-of-type(5n+4) .pl:before, .prev-row:nth-of-type(5n+4) legend:before {
  background-color: #8cfec0;
}

.prev-row:nth-of-type(5n) .pl:before, .prev-row:nth-of-type(5n) legend:before {
  background-color: #feb9bd;
}

.ary {
  counter-reset: sectioncounter;


  .line {
    position: relative;
    z-index: 9;
    margin: 4px;
    padding: 2px 4px 2px 30px;
  }

  .line:before {
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    border: solid 1px gray;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    z-index: -999;

    padding-top: 4px;
    width: 24px;
    text-align: center;
  }

  .line:nth-of-type(5n+1):before {
    background-color: #75f0fc;
  }

  .line:nth-of-type(5n+2):before {
    background-color: #fdeeaa;
  }

  .line:nth-of-type(5n+3):before {
    background-color: #b5b3ff;
  }

  .line:nth-of-type(5n+4):before {
    background-color: #8cfec0;
  }

  .line:nth-of-type(5n):before {
    background-color: #feb9bd;
  }
}

a {
  background-color: #485385;
  padding: 0 4px;
  margin: 2px 4px;
  color: white;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
  zoom: 1.02;
}

</style>